<template>
  <view class="container">
    <view v-if="isShowChoice" class="dialog-area" @click="hideDialog">
      <view class="dialog-list">
        <scroll-view scroll-y="true" scroll-top="0">
          <view class="dialog-list-item" @click.stop="btnChoiceClick(choiceList[0])">
            <text
              :class="currentItemValue !== choiceList[0].value ? 'icon-normal iconfont icon-circle' : 'icon-choice icon iconfont icon-ring'"
            ></text>
            <text>{{ choiceList[0].label }}</text>
          </view>
          <view class="dialog-list-item" @click.stop="btnChoiceClick(choiceList[1])">
            <text
              :class="currentItemValue !== choiceList[1].value ? 'icon-normal iconfont icon-circle' : 'icon-choice icon iconfont icon-ring'"
            ></text>
            <text>{{ choiceList[1].label }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChoiceSelected',
  data() {
    return {
      currentItemValue: ''
    }
  },
  props: {
    isVale: Boolean,
    choiceIndex: Object,
    choiceList: Array
  },
  computed: {
    isShowChoice: {
      get() {
        return this.isVale
      },
      set(val) {
        this.$emit('update:isVale', val)
      }
    }
  },
  methods: {
    // 显示与隐藏选择内容
    btnShowHideClick() {
      if (this.isShowChoice) {
        this.isShowChoice = false
      } else {
        this.isShowChoice = true
      }
    },
    hideDialog() {
      console.log('点击了阴影部分')
      this.isShowChoice = false
    },
    dialogClick(res) {
      console.log('点击了dialog')
    },
    // 选择
    btnChoiceClick(item) {
      console.log(item, 'vvvvg')
      this.$emit('onChoiceClick', item)
      this.isShowChoice = false
      this.currentItemValue = item.value
    }
  }
}
</script>

<style>
.container {
  position: absolute;
  z-index: 999;
  top: 160rpx;
  width: 100vw;
  height: calc(100vh - 200rpx);
}

.selected-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 96%;
  min-height: 60rpx;
  border: 2rpx solid #878585;
  border-radius: 8rpx;
  box-sizing: border-box;
  margin: 0 auto;
}

.selected-text {
  flex-grow: 1;
  color: #878585;
  font-size: 30rpx;
  padding-left: 20rpx;
  padding-top: 5rpx;
  padding-bottom: 5rpx;
}

.selected-icon {
  width: 30rpx;
  height: 30rpx;
  margin-left: 15rpx;
  margin-right: 20rpx;
}

.selected-icon-rotate {
  width: 30rpx;
  height: 30rpx;
  margin-left: 15rpx;
  margin-right: 20rpx;
  transform-origin: center;
  transform: rotate(90deg);
}

.dialog-area {
  position: absolute;
  top: 100rpx;
  width: 100%;
  height: calc(100% - 62rpx);
  background: #e5e5e5;
}

.dialog-list {
  position: absolute;
  /*定位的百分比是参照父容器的宽高*/
  left: 50%;
  top: 8rpx;
  /*使用transform实现元素的居中是参考元素本身的宽高*/
  transform: translate(-50%, 0);
  width: 96vw;
  max-height: 80vh;
  background: #fff;
  box-shadow: 5px 5px 10px gray;
  padding: 30rpx 0;
}

.dialog-list scroll-view {
  width: 100%;
  max-height: 80vh;
}

.dialog-list-item {
  width: 100%;
  padding: 25rpx 0;
  margin: 25rpx 0;
}

.dialog-list-item:hover {
  background-color: #f2f2f2;
}

.icon-normal {
  margin: 0 32rpx;
  color: #6b6a68;
}

.icon-choice {
  margin: 0 32rpx;
  color: #dc2626;
}
</style>
